<template>
    <div id="play">
        <div class="bg" :style="`background:url(${songDate[0] ? songDate[0].al.picUrl : ''})`"></div>
        <div class="top"></div>
        <div class="songUrl">
            <div class="box">
                <img :class="!now && 'stop'" :src="songDate[0] ? songDate[0].al.picUrl : ''" alt />
            </div>
        </div>
        <div class="title">{{ songDate[0] ? songDate[0].name : '' }}</div>

        <div class="songBoxt">
            <div class="list" :style="`top:${nowTopPx}`">
                <p
                    ref="songp"
                    :style="nowTop == i && 'color:red'"
                    v-for="(item, i) in data"
                    :key="i"
                >{{ item.text }}</p>
            </div>
        </div>
        <audio @timeupdate="up()" :src="songUrl" autoplay ref="audio"></audio>
        <div class="btnBox">
            <button :style="now && 'background-color:red;color:white'" @click="playSong(1)">播放</button>
            <button :style="!now && 'background-color:red;color:white'" @click="playSong(0)">暂停</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [{ time: 0 }],
            songUrl: '',
            now: 0,
            nowTop: 0,
            songDate: [],
            nowTopPx: '0px'
        }
    },
    async mounted() {
        this.songDate = (await this._fetch("/song/detail", { ids: this.$route.params.id })).songs;
        this.songUrl = (await this._fetch(`/song/url?id=${this.$route.params.id}`)).data[0].url
        this.data = (await this._fetch("/lyric", { id: this.$route.params.id })).lrc.lyric.split("\n")
        this.data = this.data.map(item => {
            return {
                time: item.split("]")[0].slice(1),
                text: item.split("]")[1],
            }
        })
        console.log(this.$refs.songp[0].offsetHieght);
        // setTimeout(() => {
        //     this.$refs.audio.play();
        // }, 1000);
    },
    methods: {
        playSong(val) {
            this.now = val
            if (val) {
                this.$refs.audio.play();
            } else {
                this.$refs.audio.pause();
            }
        },
        up() {

            let nowtime = this.$refs.audio.currentTime;
            // console.log(this.nowTop, this.data[this.nowTop].time, this.data[this.nowTop].text);

            if ((nowtime * 1000 - 5300) > new Date(`1970-1-1 08:${this.data[this.nowTop].time}`).valueOf()) {
                this.nowTop++
                this.lastTime = nowtime * 1000;
                return;
            }


        }
    }

}
</script>

<style lang="scss" >
#play {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    min-height: 100vh;
    --op: 0;

    .bg {
        content: "";
        position: fixed;
        top: 0;
        z-index: -1;
        width: 100vw;
        min-height: 100vh;
        background: url(https://p2.music.126.net/IzIZLvNJDNqpHKpoyKvYsw==/109951164488773988.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0);
        background-size: 100% 120%;
        background-attachment: fixed;
        filter: blur(10px);
    }
    .top {
        width: _vw(96);
        height: 137;
        position: absolute;
        top: 0;
        left: _vw(173);
        background: url(//s3.music.126.net/mobile-new/img/needle-plus.png?994aa910ce3e4d242eb7076620b0e502=);
        background-size: cover;
        z-index: 30;
    }
    .songUrl {
        padding-top: _vw(70);
        width: _vw(296);
        height: _vw(296);
        margin: 0 auto;
        text-align: center;
        line-height: _vw(296);
        .box {
            width: 100%;
            height: 100%;
            position: relative;

            display: flex;
            justify-content: center;
            align-items: center;
            &::after {
                content: "";
                position: absolute;
                top: _vw(-11);
                left: _vw(-11);
                right: 0;
                background: url(//s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f=)
                    no-repeat;
                background-size: cover;
                width: _vw(320);
                height: _vw(320);
                z-index: 10;
            }
            img {
                width: 90%;
                height: 90%;
                border-radius: 50%;
                animation: run 10s infinite linear;
            }
            .stop {
                animation-play-state: paused;
            }
        }
    }
    .title {
        margin: _vw(20) 0;
        color: white;
        font-size: _vw(30);
        text-align: center;
    }
    .songBoxt {
        height: _vw(130);
        overflow: hidden;
        position: relative;

        .list {
            width: _vw(305);
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: all 0.6s;
            color: white;

            p {
                padding-bottom: _vw(15);
                font-size: _vw(15);
                text-overflow: ellipsis;
                overflow: hidden;
                text-align: center;
                white-space: nowrap;
            }
        }
    }
    .btnBox {
        margin-top: 5vw;
        z-index: 50;
        display: flex;
        width: 100vw;
        justify-content: space-evenly;
        button {
            padding: _vw(20) _vw(40);
            background-color: #fff;
            border: none;
            font-size: _vw(15);
            border-radius: _vw(30);
        }
    }
}
@keyframes run {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
</style>